<template>
  <div class="main">
    <!-- 画布 -->
    <canvas id="particle-canvas" width="1079" height="937">111</canvas>

    <div class="content">
      <div class="login">
        <div class="title">酒店管理系统</div>
        <el-form
          size="small"
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="40px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="loginId">
            <el-input
              type="text"
              v-model="ruleForm.loginId"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="loginPwd">
            <el-input
              type="password"
              v-model="ruleForm.loginPwd"
              autocomplete="off"
              onkeydown="suball()"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="ruleForm.checked">记住我</el-checkbox>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
// 导入md5方法
// import {strToMd5} from '../utils/md5'
//导入背景画布方法
import { start } from "../assets/js/login";

export default {
  mounted() {
    start();
  },
  data() {
    //   验证账号
    var validateLoginId = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    // 验证密码
    var validateLoginPwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    return {
      //   表单数据
      ruleForm: {
        loginId: "", // 登录名
        loginPwd: "", // 登录密码
        checked: false, // 记住密码
      },
      // 表单验证数据
      rules: {
        // 验证账号
        loginId: [{ validator: validateLoginId, trigger: "blur" }],
        // 验证密码
        loginPwd: [{ validator: validateLoginPwd, trigger: "blur" }],
      },
    };
  },
  methods: {
    //   表单提交方法
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // console.log(valid);
          if (this.ruleForm.loginId == "admin") {
            if (this.ruleForm.loginPwd == "123456") {
              this.$router.push("/layout");
            } else {
              this.$message({
                message: "您的密码输入有误",
                type: "error",
// huiaehfafbvbjvbvbcasbhjdvbua


              });
            }
          } else {
            this.$message({
              message: "您的账号输入有误",
              type: "error",
            });
          }
          // 跳转到layout页面

          // 实现登录
          // 对密码进行加密
          // this.ruleForm.loginPwd = strToMd5(this.ruleForm.loginPwd)
          // let {message,success,token} = await this.$get("/Admin/Login", this.ruleForm);
          // 判断是否登录成功
          // if(success){
          // 服务器会返回一个token（令牌），这个token里面保存的就是你的身份信息
          // 所以，需要保存该token信息，通常会保存在浏览器的缓存空间中
          // 浏览器的缓存空间，有两种：localStorage和sessionStorage
          //区别:localStorage里面保存的数据会一直存在,sessionStorage里面保存的数据随着浏览器的关闭而自动清空
          // sessionStorage.setItem('token',token)
          // this.$setToken()  //将token信息方法请求头中
          // let res = await this.$get('Room/List')
          // console.log(res);
          // }

          // console.log(message);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 表单重置方法
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 回车可以登录
    suball(){ 
      if(event.keyCode==13){
        submitForm();
        }
    }
  },
};
</script>

<style scoped lang="scss">
#particle-canvas {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    to bottom,
    rgb(10, 10, 50) 0%,
    rgb(60, 10, 60) 100%
  );
  vertical-align: middle;
}
.main {
  width: 100vw;
  height: 100vh;
  position: relative;
  .content {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    .login {
      width: 420px;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 20px;
      .title {
        font-size: 20px;
        text-align: center;
        color: #fff;
        margin-bottom: 20px;
      }
    }
  }
}
</style>